<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.7.1.min.js"></script>
    <style>
        #main{
            width: 85%;
            height: 700px;
        }

        #search {
            background-color: #f2f2f2;
            height: 60px;
            /* div{
                display: inline-block;
                width: 10px;
                height: 60px;
                background-color: #009688;
            } */
            input {
                height: 33px;
                margin-left: 2%;
            }
            button{
                color: white;
                margin-top: 10px;
                height: 40px;
            }
            #select_btn{
                width: 6%;
                background-color: #189f93;
            }
            #addUser_btn{
                width: 8%;
                background-color: #33a7fe;
            }
        }

        #table-container{
            height: 600px;
            overflow: scroll;
        }

        table{
            margin-top: 10px;
            width: 98%;
            
            border-collapse: collapse; /* 控制相邻单元格共享边框 */
            thead{
                background-color: #f2f2f2;
            }
            th,td{
                border: 1px solid #999;
                text-align: center;
                padding: 20px 0;
                img{
                    margin: 0 1%;
                }
            }
        }
    </style>
</head>
<body>
    <div id="new_header">
        <script>
            $("#new_header").load("manager_header.html")
        </script>
    </div>
    <div id="main" class="right">
        <!-- 用户管理 -->
        <div id="user_manage">
            <!-- 搜索栏部分 -->
            <div id="search">
                <input type="text" placeholder="请输入关键字">
                <button id="select_btn">查询</button>
                <button id="addUser_btn">添加用户</button>
            </div>
            <!-- 列表部分 -->
            <div id="table-container">
                <table width="20%" align="center">
                    <!-- <caption>学生信息</caption> -->
                    <thead>
                        <th>序号</th>
                        <th>用户名</th>
                        <th>手机号码</th>
                        <th>真实姓名</th>
                        <th>身份证号</th>
                        <th>状态</th>
                        <th>操作</th>
                    </thead>
                    <tbody id="tBodyUsers">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script>
        $.getJSON(
            'AdminServlet',
            {methodName: "getAllUser", condition: "all"},
            function (result){
                for(var i=0; i<result.length; i++){
                    var $newtr = $("<tr></tr>");
                    $newtr.append($("<td>"+(i+1)+"</td>"));
                    $newtr.append($("<td>"+result[i].userName+"</td>"));
                    $newtr.append($("<td>"+result[i].phone+"</td>"));
                    $newtr.append($("<td>"+result[i].realName+"</td>"));
                    $newtr.append($("<td>"+result[i].idNumber+"</td>"));
                    $newtr.append($("<td>已注册</td>"));
                    var htmlPart = "<img src=\"imgs/savebtn.png\" title=\"保存\">"+
                                    "<img src=\"imgs/editbtn.png\" title=\"编辑\">"+
                                    "<img src=\"imgs/deletebtn.png\" title=\"删除\" onclick=\"delete_a_User('"+result[i].userName+"')\"></img>";
                    $newtr.append($("<td>"+htmlPart+"</td>"));
                    $("#tBodyUsers").append($newtr);
                }
            }
        );
        //通过用户名删除用户
        function delete_a_User(name){
            console.log("删除"+name);
            $.ajax({
                    url:"AdminServlet",
                    type:"get",
                    data:"methodName=deleteUser&username=" + name, 
                    success:function(result){
                        if($.trim(result) === "true"){
                            alert("操作成功");
                            location.reload();
                        }else{
                            alert("操作失败");
                        }
                    },
                    error:function(){
                        alert("出现错误");
                    }
                });
        }
    </script>
</body>
</html>